<template>
  <br />
  <div>
    <z-button type="primary" @click="() => setVisible(true)">show image preview</z-button>
    <z-image
      :width="200"
      :style="{ display: 'none' }"
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const visible = ref(false)

    const setVisible = value => {
      visible.value = value
    }

    return {
      visible,
      setVisible
    }
  }
})
</script>
